<template>
  <div>
    <div class="col-sm-12">
      <div class="col-sm-3">
        <button class="btn btn-default" data-toggle="collapse" aria-expanded="false" v-on:click="onBack()">返回上一级
        </button>
        &nbsp;
        <button class="btn btn-default" href="#add" v-on:click="onAdd('modeAddNew')">新增</button>
        <a role="button" class="btn btn-default" data-toggle="collapse" href="#details"
           aria-expanded="false"
           aria-controls="details">详情</a>
      </div>
      <!-- <form id="search"> -->
      <div class="col-sm-offset-3 col-sm-3">
        <input id="searchQuery" name="query" type="text" style="float:right" v-model="searchQuery" class="form-control"
               required/>
      </div>
      <div class="col-sm-2">
        <button id='search' class="btn btn-block btn-success save" v-on:click="basicsearch($event)">
          <strong>搜索全部</strong>
        </button>
      </div>
      <div class="col-sm-1 text-left vertical-middle-sm">
        <h5><strong>
          <a role="button" class="control-label" data-toggle="collapse" href="#advancedsearch" aria-expanded="false"
             aria-controls="advancedsearch">高级...</a>
        </strong></h5>
      </div>
      <!-- </form> -->
    </div>
    <div class="row">
      <div class="col-sm-12">
        <br/>
      </div>
    </div>

    <div class="row">
      <div class="collapse col-sm-12" id="advancedsearch">
        <div class="well">
          <div class="row">
            <!-- <form class="form-horizontal contract-form"> -->
            <div class="form-group">
              <label class="col-sm-1 control-label">criterion</label>
              <div class="col-sm-5">
                <input id="begintime" name="begintime" type="text" v-model="criterion" value="2015-01-01" required/>
              </div>

              <label class="col-sm-1 control-label">pagenum</label>
              <div class="col-sm-5">
                <input id="endtime" name="endtime" type="text" v-model="pagenum" value="2015-02-01" required/>
              </div>
            </div>

            <br>
            <div class="form-group">

              <label class="col-sm-1 control-label">pagesteps</label>
              <div class="col-sm-5">
                <input id="deviceid" name="deviceid" type="text" v-model="pagesteps" value="" class="form-control"
                       required/>
              </div>

            </div>
            <div class="form-group">

              <div class="col-sm-offset-9 col-sm-1">
                <button id='clear' class="btn btn-block btn-warning">清除</button>
              </div>

              <div class="col-sm-2">
                <button id='submitbutton' class="btn btn-block btn-success save"
                        v-on:click="advancedsearch($event)">提交
                </button>
              </div>

            </div>
            <!-- </form> -->
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="collapse col-sm-12" id="details">
        <div class="well">
          <div class="row">
            <!-- <form class="form-horizontal contract-form"> -->
            <table class="table table-bordered table-condensed table-striped">
              <thead>
              <tr>
                <th>uuid</th>
                <th>level</th>
                <th>crtdate</th>
                <th>upddate</th>
                <th>crtuser</th>
                <th>upduser</th>
                <th>originname</th>
                <th>curname</th>
                <th>parent</th>
                <th>state</th>
                <th>properties</th>
              </tr>
              </thead>
              <tbody>
              <td>{{items2.uuid}}</td>
              <td>{{items2.level}}</td>
              <td>{{items2.crtdate}}</td>
              <td>{{items2.upddate}}</td>
              <td>{{items2.crtuser}}</td>
              <td>{{items2.upduser}}</td>
              <td>{{items2.originname}}</td>
              <td>{{items2.curname}}</td>
              <td>{{items2.parent}}</td>
              <td>{{items2.state}}</td>
              <td>{{items2.properties}}</td>
              </tbody>
            </table>
            <!-- </form> -->
          </div>
        </div>
      </div>
      <!-- details -->
    </div>
  </div>
</template>
<style>
</style>
<script>
  export default{
    mode: 'modeList',
    data: function () {
      return {
        curitem: {},
        criterion: '',
        pagenum: '',
        pagesteps: '',
        items2: ''
      }
    },
    methods: {
      onAdd: function () {
        console.log('setMode: inside component itemsearch')
        this.$dispatch('component', 'modeAddNew')
      },
      onBack: function () {
        this.$dispatch('onback')
      },
      onRemoveSelected: function () {
        var items = this.delitems
        console.log(items)
        var r = window.confirm('确定删除选中任务？')
        if (r === true) {
          for (var i in items) {
            if (items[i].selected) {
              this.$dispatch('deleteitems', items[i])
            }
          }
          this.$dispatch('finditem')
        }
      }
    },
    ready: function () {
    },
    events: {
      'items': function (items) {
        console.log('delete all')
        this.delitems = items
      }
    }
  }
</script>
